<template>
	<Poptip
		:title="title"
		:placement="placement"
		:trigger="trigger"
		:width="width"
		:transfer="true"
		:options="options"
	>
        <slot></slot>
        <div slot="content" class="ui-text-cell">
    		<p v-for="(item, index) of value" :key="index" v-html="item"></p>
    	</div>
    </Poptip>
</template>

<script>
export default {
	name: 'poptipCells',
	props: {
        title:{
            type: String,
            default: ''
        },
        value:{
            type: Array,
            default: function() {
            	return [];
            }
        },
		placement: {
            type: String,
            default: 'left'
        },
        width: String | Number,
        trigger:{
            type: String,
            default: 'hover'
        }
	},
	data() {
		return {
			options: {
                modifiers: {
                    computeStyle:{
                        gpuAcceleration: false,
                    },
                    preventOverflow :{
                        boundariesElement: 'viewport'
                    }
                }
            }
		}
	}
}
</script>